<template>
	<view>
		<view v-if="update">
			<view class="edition-box">
				<view>
					<image :src="logo" class="logo" style="margin:0 auto;"></image>
				</view>
				<view class="app-name">SidChain.</view>
				<view class="version-name">Version {{versionName}}</view>
				<view class="version-name text-highlight" style="font-weight: bold;">已有新版本： {{info.versionName}}</view>
				<view v-if="doUpdate">
					<view><progress :percent="speed" activeColor="#31E8D6" show-info stroke-width="3" /></view>
					<view>{{updateLength}}M / {{allLength}}M</view>
				</view>
				<view><button class="y-button btn-primary" :disabled="doUpdate" @click="sendUpdate">立即更新</button></view>
			</view>
			<view class="edition-box edition-content-box">
				<view class="edition-content-title text-highlight">{{info.versionName}}主要更新</view>
				<view v-html="info.note">{{content}}</view>
			</view>
		</view>
		<view v-else class="edition-box edition-new-box">
			<view>
				<image :src="logo" class="logo" style="margin:0 auto;"></image>
			</view>
			<view class="app-name">SidChain.</view>
			<view class="version-name">Version {{versionName}}</view>
			<view>已是最新版本</view>
		</view>
	</view>

</template>

<script>
	import logo from '@/static/logo/logo-sid.png'
	import api from '@/utils/api/system/index.js'
	import config from "@/utils/request/config.js"
	export default {
		data() {
			return {
				logo,
				description: '',
				update: false,
				content: '',
				info: {},
				doUpdate: false,
				speed: 0,
				updateLength: 0,
				allLength: 0,
				versionName: "",
				versionBuild: 0,
			}
		},
		onShow() {
			this.versionName = config.versionName;
			this.versionBuild = config.versionBuild;

			const _this = this
			uni.getSystemInfo({
				success(res) {
					_this.description = res.platform
					_this.getData()
				},
				fail(res) {
					uni.showToast({
						title: '无法获取设备信息'
					})
				}
			})
		},
		methods: {
			async getData() {
				var postData = {
					description: this.description,
					versionBuild: this.versionBuild,
				};
				const res = await api.version(postData)
				if (res.status == 1) {
					res.data != "" && res.data != null ? this.update = true : this.update = false
					if (this.update) {
						this.info = res.data;
					}
				}
			},
			sendUpdate() {
				const _this = this
				//plus.runtime.openURL(_this.info.downloadUrl); //全部走浏览器更新

				if (this.description === 'ios') {
					plus.runtime.openURL(_this.info.downloadUrl)
				} else if (this.description === 'android') {
					this.AndroidCheckUpdate()
				}
			},
			AndroidCheckUpdate() {
				var _this = this
				const downloadTask = uni.downloadFile({
					url: _this.info.downloadUrl,
					success(res) {
						if (res.statusCode === 200) {
							plus.runtime.install(res.tempFilePath, {}, function() {}, function(error) {
								uni.showToast({
									title: '安装失败',
									mask: false,
									duration: 1500
								})
							})
						}
					},
					fail() {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
						_this.doUpdate = false
					}
				})
				downloadTask.onProgressUpdate((res) => {
					_this.doUpdate = true
					_this.speed = res.progress,
						_this.updateLength = (res.totalBytesWritten / 1024 / 1024).toFixed(2)
					_this.allLength = (res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2)
					if (res.progress === 100) {
						_this.doUpdate = false
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.app-name {
		font-size: 30px;
		color: #FFFFFF;
	}

	.version-name {
		margin-bottom: 10px;
	}

	.logo {
		width: 200upx;
		height: 200upx;
		border-radius: 12px;
		margin-bottom: 20upx;
		box-shadow: 0 0 15px rgba(0, 0, 0, .2);
	}

	.edition-box {
		padding: 50upx 50upx;
		text-align: center;

		.y-button {
			margin-top: 30upx;
			width: 100%;
		}
	}

	.edition-content-box {
		text-align: left;
	}

	.edition-content-title {
		font-weight: bold;
	}

	.edition-content {
		display: flex;
		flex-direction: column;
	}

	.edition-new-box {
		background: transparent;
		border: none;
	}
</style>
